<template>
	<view class="content">
		<view class="button_container">
			<!-- <button class="btn-item" size="mini" type="primary" @click="file_writer">写入文件</button> -->
			<button class="btn-item" size="mini" type="primary" @click="file_reader">读取文件</button>
			<button class="btn-item" size="mini" type="primary" @click="initStateSource">加载文件</button>
			<button class="btn-item" size="mini" type="primary" @click="removeSource">删除文件</button>
		</view>
		<view class="uni-list-cell-db">
			<picker v-if="array.length" @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{ array[index] }}</view>
			</picker>
		</view>
		<view class="echarts-wrap">
			<!-- #ifdef APP-PLUS || H5 -->
			<view :prop="options" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS || H5 -->
			<view>非 APP、H5 环境不支持</view>
			<!-- #endif -->
			<view style="text-align: center;">{{ options.series.data.length ? '' : '请先加载数据' }}</view>
		</view>
	</view>
</template>

<script>
import data from '../../utils/data.js';
import { ioWriterPlus, ioReaderPlus, ioRemovePlus, ioSourcePlus } from '../../utils/utils.js';

export default {
	data() {
		return {
			array: [],
			index: 0,
			file: '',
			myChart: null,
			options: {
				color: ['#f04864', '#facc14', , '#8543e0', '#90ed7d'],
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: []
				},
				yAxis: {
					type: 'value'
				},
				dataZoom: [
					{
						startValue: '0'
						// endValue: '400'
					},
					{
						type: 'inside'
					}
				],
				series: {
					data: [],
					name: '电流值',
					type: 'line'
				}
			}
		};
	},
	onLoad() {
	},
	onShow() {
		this.initStateSource();
	},
	methods: {
		bindPickerChange({ target }) {
			this.index = target.value || 0;
			this.file = this.array[target.value];
			setTimeout(() => {
				this.file_reader(this.file);
			}, 50);
		},
		file_writer() {
			ioWriterPlus(data).then(res => {
				console.log(res);
			});
		},
		file_reader() {
			if (this.file) {
				ioReaderPlus(this.file).then(res => {
					const params = 'string' === typeof res ? JSON.parse(res) : res;
					const { data = [] } = params || {};
					this.echarts = {
						xAxis: {
							type: 'category',
							data: data.map(val => val.categorie)
						},
						series: { name: '电流值', type: 'line', data: data.map(val => val.value) }
					};
					this.options = { ...this.options, ...this.echarts };
				});
			}
		},
		initStateSource() {
			ioSourcePlus().then(res => {
				this.array = res;
			});
		},
		removeSource(url) {
			ioRemovePlus().then(res => {
				if (res === 200) (this.array = []), (this.file = '');
			});
		}
	}
};
</script>

<script module="echarts" lang="renderjs">
let myChart
export default {
	mounted() {
		if (typeof window.echarts === 'function') {
			this.initEcharts()
		} else {
			// 动态引入较大类库避免影响页面展示
			const script = document.createElement('script')
			// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
			script.src = 'static/scripts/echarts.js'
			script.onload = this.initEcharts.bind(this)
			document.head.appendChild(script);
		}
	},
	methods: {
		initEcharts() {
			this.myChart = echarts.init(document.getElementById('echarts'));
			// 观测更新的数据在 view 层可以直接访问到
			if(this.options.series.data.length){
				console.log(this.myChart)
				this.myChart.setOption(this.options);
			}
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			if(newValue.series.data.length){
				this.myChart = this.myChart || echarts.init(document.getElementById('echarts'));
				this.myChart.setOption(newValue);
			}
		}
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.button_container {
	display: flex;
	flex-direction: column;
}

.btn-item {
	margin-top: 30upx;
}

.uni-list-cell-db {
	margin-top: 20upx;
}

.scroll-Y {
	height: 240upx;
}

.echarts-wrap {
	display: flex;
	flex-direction: column;
	width: 750upx;
	height: 640upx;
}

.echarts {
	margin-top: 40upx;
	width: 100%;
	height: 580upx;
}
</style>
